<template>
	<navBar title="登录/注册" tabBar></navBar>
	<image :src="imgUrls(mainStore.BaseInfo.icon)" mode="aspectFit" class="NIUlogo"></image>
	<view class="NiuTxt">{{ mainStore.BaseInfo.siteName }}</view>

	<view class="m-top100 d-flex f-column a-center">
		<button
			class="btn themeBg size30 white t-letter2"
			open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber"
			v-if="mainStore.agree">
			授权手机号
		</button>
		<view class="btn themeBg size30 white t-letter2" @click="Verify" v-else>授权手机号</view>
		<view class="btn bgF2 flexac size30 color_33 t-letter2 m-top40 m-bot30" @click="Back()"
			>取消</view
		>
		<agreement></agreement>
	</view>
</template>

<script setup>
	import { ref, onUnmounted } from 'vue';
	import { useMainStore } from '@/stores/index';
	import { Toast, imgUrls, Back } from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	import { myInfo } from '@/utils/api.js';
	const mainStore = useMainStore();

	const shake = ref(false);

	const cancel = () => {};
	const toDetails = () => {};

	const getPhoneNumber = (event) => {
		const { encryptedData, iv } = event.detail;
		Http.post({
			url: '/api/appletDecodePhone',
			data: {
				encryptedData,
				iv,
				sessionKey: mainStore.session_key,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			registerUser(res.data.phoneNumber);
		});
	};

	const registerUser = (tel) => {
		Http.post({
			url: '/api/registerUser',
			data: {
				open_id: mainStore.openid,
				tel,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			mainStore.token = res.msg;
			myInfo();
			Back();
		});
	};

	const Verify = () => {
		Toast('未同意协议');
	};

	onUnmounted(() => {
		mainStore.agree = false;
	});
</script>

<style lang="scss" scoped>
	.NIUlogo {
		width: 180rpx;
		height: 180rpx;
		display: block;
		margin: 0 auto;
	}
	.NiuTxt {
		width: 100%;
		text-align: center;
		color: #000;
		font-size: 36rpx;
		margin-top: 40rpx;
	}
	.btn {
		width: 600rpx;
		height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
	}
</style>
